import { Spin } from "@arco-design/web-react";
import { invoke } from "@tauri-apps/api/core";
import { useEffect, useState } from "react";
import { Letter } from "react-letter";
import { useParams } from "react-router-dom";

const EmailInfo = () => {
    const params = useParams();
    const emailid = params.id
    const [bd,setBd] = useState<string>("");
    const [hd,setHd] = useState<any>(undefined);
    useEffect(()=>{
        const getInfo = async(id:any) => {
            let result:string = await invoke("get_email_body",{id:id}) 
            setBd(result)
        }

        const gethead = async(id:any) => {
            let result = await invoke("get_email_body_once",{id:id})
            setHd(result)
            console.log(result)
        }
        gethead(emailid)
        getInfo(emailid)
    },[])
    return(
        <>
            <div>
                <div>
                    {hd===undefined?<Spin />:
                    <div style={{backgroundColor:'#fff',color:'black',padding:10}}>
                        
                        <div style={{fontWeight:'bold',margin:'5px 0px'}}>{hd.subject}</div>
                        <div style={{margin:'5px 0px'}}>发件人：{hd.from}</div>
                        <div style={{margin:'5px 0px'}}>收件人：{hd.to}</div>
                        <div style={{margin:'5px 0px'}}>时间：{hd.date}</div>
                    </div>}
                </div>
                
                {bd.length>0?<Letter html={bd}/>:<Spin />}
            </div>
        </>
    )
}
export default EmailInfo;